<html lang="en">

<head>
    <title>STL Loader</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            /* 隐藏body窗口区域滚动条 */
          }
        html, body {
                font-family: Calibri, sans-serif;
                font-size: 36px;
                height: 100%;
                margin: 0;
                overflow: hidden;
            }

        canvas {
            height: 100%;
            width: 100%;
        }

        .threejs-btn-wrapper {
            position: absolute;
        }

        .threejs-btn-group {
            margin: 1em;
            width: 1.5em;
        }

        .threejs-btn {
            background: #fff;
            border: thin solid #aaa;
            border-radius: 0.25em;
            color: #555;
            cursor: pointer;
            font-size: inherit;
            height: 1.5em;
            margin: 1em 0 0 1em;
            min-width: 1.5em;
            padding: 0 0.4em;;
        }

        .threejs-btn svg {
            fill: #555;
            margin-top: 0.1em;
        }

        .threejs-btn:hover {
            border-color: #777;
            box-shadow: 0.03em 0.05em 0.1em rgba(0,0,0,.2);
            color: #000;
        }

        .threejs-btn:active {
            background: #ddd;
            box-shadow: none;
        }

        .threejs-btn:hover svg {
            fill: #000;
        }

        .threejs-btn:focus {
            outline: thin dotted;
            outline-offset: -0.2em;
        }

        .threejs-btn.disabled {
            background: #bababa;
            color: #888;
            pointer-events: none;
        }

        .threejs-btn.disabled svg {
            fill: #888;
        }

        .threejs-btn-group button {
            margin: 0;
        }

        .threejs-btn-group .threejs-btn:last-of-type {
            border-radius: 0 0 0.25em 0.25em;
        }

        .threejs-btn-group .threejs-btn:first-of-type {
            border-radius: 0.25em 0.25em 0 0;
        }

        #threejs-rotate-y-icon {
            transform: rotate(90deg);
        }

        button[id^="threejs-rotate"] {
            padding: 0.1em 0.2em;
        }

        .threejs-btn-group.threejs-btn-group-directional {
            align-items: center;
            display: flex;
            left: 2.75em;
            position: absolute;
            top: 2.5em;
            width: 5em;
        }

        .threejs-btn-group.threejs-btn-group-directional .threejs-btn {
            border-radius: 0.25em;
            margin: 0.1em;
            padding: 0.05em 0.15em;
        }

        #threejs-down svg {
            transform: rotate(90deg);
        }

        #threejs-up svg {
            transform: rotate(-90deg);
        }

        #threejs-left svg {
            transform: rotate(180deg);
        }

        .threejs-help-overlay {
            align-items: center;
            background: rgba(0,0,0,.75);
            display: flex;
            height: 100%;
            justify-content: space-around;
            position: absolute;
            width: 100%;
            z-index: 10;
        }

        .threejs-help-overlay.hidden {
            display: none;
        }

        .threejs-help-overlay-close {
            color: #fff;
            cursor: pointer;
            position: absolute;
            right: 1.25em;
            top: 1em;
        }

        .threejs-help-overlay p {
            color: #fff;
            font-weight: normal;
            text-align: center;
            padding: 0 .75em;
            font-size: 0.8em;
            line-height: 1.1;
        }

        .threejs-help-overlay b {
            font-size: 1.25em;
            line-height: 1.4;
        }

        </style>
<!--     <script src="js/three.js"></script>
    <script src="js/STLLoader.js"></script>
    <script src="js/OrbitControls.js"></script> -->
<script src="https://www.wjceo.com/lib/three.js"></script>
    <script src="https://www.wjceo.com/lib/js/loaders/STLLoader.js"></script>
    <script src="https://www.wjceo.com/lib/js/controls/OrbitControls.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>
    <div class="threejs-help-overlay hidden">
        <div class="threejs-help-overlay-close">x</div>
        <p><b>Rotate</b><br />Use the rotate buttons or left-click and drag.</p>
        <p><b>Move</b><br />Use the arrow buttons or right-click and drag.</p>
        <p><b>Zoom</b><br />Use the + and - buttons or pinch&#8209;to&#8209;zoom.</p>
    </div>
    <div class="threejs-btn-wrapper">
        <button id="threejs-help" class="threejs-btn"><b>?</b></button>
        <button id="threejs-reset" class="threejs-btn">Reset</button>
        <div class="threejs-btn-group">
            <button id="threejs-zoom-in" class="threejs-btn disabled">+</button>
            <button id="threejs-zoom-out" class="threejs-btn">-</button>
        </div>
        <div class="threejs-btn-group">
            <button id="threejs-rotate-x" class="threejs-btn">
                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 240 240" enable-background="new 0 0 240 240" xml:space="preserve">
                    <path d="M187.5,78.3c-19-7.5-43.9-11.7-70.3-11.7c-26.4,0-51.4,4.1-70.3,11.7c-12.9,5.1-34.6,16.8-34.6,37s21.7,31.8,34.6,37  c6.4,2.5,13.4,4.7,20.9,6.4l-0.3-23.9c-4.3-1.2-8.4-2.5-12.1-4c-13.8-5.5-20.1-11.9-20.1-15.5s6.3-10,20.1-15.5  c16.3-6.5,38.3-10.1,61.8-10.1c23.5,0,45.5,3.6,61.8,10.1c13.8,5.5,20.1,11.9,20.1,15.5s-6.3,10-20.1,15.5  c-5.7,2.3-12.1,4.2-19.1,5.7c0,0-8.6,2.2-17.2,3.6l0.4-25.9l-58.7,33.6l57.7,32.7l0.3-18.4c5.2-0.1,11.5-0.6,17.8-2.1  c9.9-1.9,19.1-4.5,27.3-7.7c12.9-5.1,34.6-16.8,34.6-37S200.4,83.5,187.5,78.3z" />
                </svg>
            </button>
            <button id="threejs-rotate-y" class="threejs-btn">
                <svg id="threejs-rotate-y-icon" x="0px" y="0px" viewBox="0 0 240 240">
                    <path d="M187.5,78.3c-19-7.5-43.9-11.7-70.3-11.7c-26.4,0-51.4,4.1-70.3,11.7c-12.9,5.1-34.6,16.8-34.6,37s21.7,31.8,34.6,37  c6.4,2.5,13.4,4.7,20.9,6.4l-0.3-23.9c-4.3-1.2-8.4-2.5-12.1-4c-13.8-5.5-20.1-11.9-20.1-15.5s6.3-10,20.1-15.5  c16.3-6.5,38.3-10.1,61.8-10.1c23.5,0,45.5,3.6,61.8,10.1c13.8,5.5,20.1,11.9,20.1,15.5s-6.3,10-20.1,15.5  c-5.7,2.3-12.1,4.2-19.1,5.7c0,0-8.6,2.2-17.2,3.6l0.4-25.9l-58.7,33.6l57.7,32.7l0.3-18.4c5.2-0.1,11.5-0.6,17.8-2.1  c9.9-1.9,19.1-4.5,27.3-7.7c12.9-5.1,34.6-16.8,34.6-37S200.4,83.5,187.5,78.3z" />
                </svg>
            </button>
        </div>
        <div class="threejs-btn-group threejs-btn-group-directional">
            <button id="threejs-left" class="threejs-btn">
                <svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
                    <path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z" />
                </svg>
            </button>
            <div class="threejs-up-down-wrapper">
                <button id="threejs-up" class="threejs-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
                        <path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z" />
                    </svg>
                </button>
                <button id="threejs-down" class="threejs-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
                        <path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z" />
                    </svg>
                </button>
            </div>
            <button id="threejs-right" class="threejs-btn">
                <svg xmlns="http://www.w3.org/2000/svg" x+"0px" y="0px" viewBox="0 0 75 75">
                    <path d="M61.277 34.077L42.893 15.693c-1.995-1.994-5.228-1.994-7.222 0-1.993 1.995-1.993 5.228 0 7.222l9.667 9.666H16.785c-2.793 0-5.058 2.288-5.058 5.108s2.264 5.107 5.058 5.107h28.55l-9.664 9.666c-1.993 1.996-1.993 5.23 0 7.223.998.997 2.304 1.496 3.612 1.496 1.307 0 2.614-.5 3.61-1.497L61.276 41.3c.958-.958 1.496-2.257 1.496-3.61 0-1.356-.538-2.655-1.495-3.613z" />
                </svg>
            </button>
        </div>
    </div>
    <script id="vertexShader" type="x-shader/x-vertex">
        uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;

    attribute vec3 position;
    attribute vec3 normal;

    varying vec3 vPosition;
    varying vec3 vNormal;
    varying vec3 normal_in_camera;
    varying vec3 view_direction;
    void main() {
        vec4 pos_in_camera = modelViewMatrix * vec4(position, 1.0);
        gl_Position = projectionMatrix * pos_in_camera;
        normal_in_camera = normalize(mat3(modelViewMatrix) * normal);
        view_direction = normalize(pos_in_camera.xyz);

 
    }

</script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision mediump float;


    uniform vec3 color;
    varying vec3 normal_in_camera;    
    varying vec3 view_direction;

    void main() {

    float edginess = abs(dot(normal_in_camera, view_direction));      
    float opacity = clamp(edginess - 0.30, 0.0, 0.5);      
   
    float blackness = pow(edginess, 4.0) - 0.3;        
    vec3 c = mix(color, vec3(0,0,0), blackness);        
    gl_FragColor = vec4(edginess,edginess,edginess, 1.0);
    }

</script>
    <div id="threejs-content"></div>
    <script type="module">
        import {BufferGeometryUtils} from 'https://threejsfundamentals.org/threejs/resources/threejs/r127/examples/jsm/utils/BufferGeometryUtils.js';
    var scene = new THREE.Scene();

    var loader = new THREE.STLLoader();

    loader.load('src/u-1-c.stl', function(geometry) {
        // 控制台查看加载放回的threejs对象结构
        console.log(geometry);
        // 查看顶点数，一个立方体6个矩形面，每个矩形面至少2个三角面，每个三角面3个顶点，
        // 如果没有索引index复用顶点，就是说一个立方体至少36个顶点
        console.log(geometry.attributes.position.count);
        // 缩放几何体
        // geometry.scale(0.5,0.5,0.5);
        // 几何体居中
        // geometry.center();
        // 平移立方体
        // geometry.translate(-50,-50,-50);
        var material = new THREE.MeshLambertMaterial({
            color: 0xeeeeee,
            side: THREE.DoubleSide,

        }); //材质对象Material
        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
        //var box1=geometry.computeBoundingBox();
        scene.add(mesh); //网格模型添加到场景中
    })

    loader.load('src/l-1-c.stl', function(geometry) {
        // 控制台查看加载放回的threejs对象结构
        console.log(geometry);
        // 查看顶点数，一个立方体6个矩形面，每个矩形面至少2个三角面，每个三角面3个顶点，
        // 如果没有索引index复用顶点，就是说一个立方体至少36个顶点
        console.log(geometry.attributes.position.count);

        const material = new THREE.RawShaderMaterial({
            uniforms: {
                ratio: {
                    value: 0.0
                },
                color: {
                    value: new THREE.Color(0xaaaaaa)
                }
            },
            transparent: true,
            // opacity: 0.5,
            side: THREE.DoubleSide,
            depthTest: 1,

            vertexShader: document.getElementById('vertexShader').textContent,
            fragmentShader: document.getElementById('fragmentShader').textContent,
        });
        const tempGeo = new THREE.Geometry().fromBufferGeometry(geometry);
        tempGeo.mergeVertices();
        tempGeo.computeVertexNormals();
        tempGeo.computeFaceNormals();
        geometry = new THREE.BufferGeometry().fromGeometry(tempGeo);


        geometry.computeBoundingBox();
        console.log(geometry.boundingBox);

        var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

        scene.add(mesh); //网格模型添加到场景中
    })

    //  var center=(box1.getCenter()+box2.getCenter())/2;

    //点光源
    var point1 = new THREE.PointLight(0xffffff);
    point1.position.set(400, 200, 300);
    scene.add(point1);

    //点光源
    var point1 = new THREE.PointLight(0xffffff);
    point1.position.set(-400, -200, -300);
    scene.add(point1);

    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    //相机设置
    var width = window.innerWidth;
    var height = window.innerHeight;

    var k = width / height;

    var s = 80;
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(0, 200, 0);
    camera.lookAt(scene.position);

    /**
     * * 创建渲染器对象
     * */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色

    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    function render() {
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }
    render();

    //创建控制对象
    var controls = new THREE.OrbitControls(camera);
    controls.enableDamping = true;
    //动态阻尼系数 就是鼠标拖拽旋转灵敏度
    //controls.dampingFactor = 0.25;
    //是否可以缩放
    controls.enableZoom = true;
    //是否自动旋转
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.5;
    //设置相机距离原点的最远距离
    controls.minDistance = 1;
    //设置相机距离原点的最远距离
    controls.maxDistance = 200000;
    //是否开启右键拖拽
    controls.enablePan = true;
    </script>
    <script>
    $("#threejs-reset").click(function(e) {

        // controls.reset();
    });

    // $("threejs-zoom-in").click(function (e) {

    //     controls.scale(1.1);
    // });
    </script>
</body>

</html>